const uCharts = require('../../../utils/u-charts.min.js');

Page({
  data: {
    chartData: null,
    chartOpts: {
      width: 375,
      height: 200,
      padding: [15, 60, 0, 15],
      extra: {
        candle: {
          color: {
            upLine: '#f04864',
            upFill: '#f04864',
            downLine: '#2fc25b',
            downFill: '#2fc25b'
          }
        }
      },
      xAxis: {
        disabled: false,
        itemCount: 5
      },
      yAxis: {
        disabled: false,
        splitNumber: 5,
        gridType: 'dash'
      }
    }
  },

  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('updateKLineData', (data) => {
      this.setData({
        chartData: data
      });
      this.updateChart();
    });
  },

  updateChart() {
    const query = wx.createSelectorQuery().in(this);
    query.select('#k-line-chart')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const chart = new uCharts({
          ...this.data.chartOpts,
          context: ctx,
          canvas: canvas,
          categories: this.data.chartData.categories,
          series: this.data.chartData.series,
          type: 'candle'
        });
      });
  }
}); 